<template>
	<view>
		<!-- <search-header :show-search-btn="false" :focus="false" @back="back"></search-header> -->
		<!-- <view class="shop-title">
			<view class="shop-item" v-for="(item,index) in topFuncList.data" :key="index" @tap="changeTap(index)">
				<view :class="topFuncList.currentIndex ===  index ? 'font-active-color':''">{{ item.name }}</view>
				<view class="icon-arrow">
					<view class="iconfont search-sort up icon-shangjiantou"
						:class="topFuncList.data[index].status ===  1 ? 'font-active-color':''"></view>
					<view class="iconfont search-sort down icon-xiajiantou"
						:class="topFuncList.data[index].status ===  2 ? 'font-active-color':''"></view>
				</view>
			</view>
		</view> -->
		<scroll-view scroll-x="true" class="scroll-content">
			<view 
			class="scroll-item" 
			v-for="(item,index) in topBar" :id="'top' + index"
			
			@tap="openAttrBox(item)" 
			:key="item.attrName">
				<text>{{ item.attrName }}</text>
				<!-- <view class="jiantou">
					<text class="iconfont icon-xiajiantou1"></text>
				</view> -->
			</view>
		</scroll-view>
		<view v-if="showAttrBox" class="attr-box">
			<view>
				<checkbox-group class="attr-content" @change="handleAttrSelect">
					<label class="attr-item" v-for="(item,index) in attrList" :key="index">
						<checkbox 
						:checked="selectedAttrs.findIndex(e => selectedTapBar.attrId === e.attrId) === -1 ? false 
						: selectedAttrs.find(e => selectedTapBar.attrId === e.attrId).selectValues.indexOf(item) !== -1" 
						:value="item" 
						style="transform: scale(0.7)" 
						color="#E4393D" /> {{ item }}
					</label>
				</checkbox-group>
			</view>
			<view class="attr-box-footer">
				<view class="reset attr-footer-item" @tap="reset">重置</view>
				<view class="confirm attr-footer-item" @tap="confirmSelectAttr">确认</view>
			</view>
		</view>
		
		
		<!-- 搜索结果  -->
		<view class="commodity bg-color">
			<view @tap="goDetail" class="commodity-item" v-for="item in commodityList" :key="item.id">
				<image class="commodity-cover" :src="item.cover" mode=""></image>
				<view class="commodity-content">
					<text class="commodity-title" v-html="item.name"></text>
					<view class="quick-attrs" v-if="item.quickShowAttr">
						<view class="quick-attr-item" v-for="(attr,index) in item.quickShowAttr" :key="index">
							{{ attr }}
						</view>
					</view>
					<view class="price-box">
						<text class="current-price">
							<text class="price-prefix">¥</text>
							{{ item.price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ShopList from "@/common/ShopList.vue"
	import SearchHeader from '../../components/common/SearchHeader.vue'
	import $http from '../../common/api/request.js'
	export default {
		components: {
			ShopList,
			SearchHeader
		},
		data() {
			return {
				showAttrBox: false,
				commodityList: [],
				topBar: [],
				attrList:[],
				selectedTapBar: {},
				selectAttrsTmp: {
					attrId:'',
					selectValues: []
				},
				selectedAttrs: [],
				searchParams: {
					pageNo: 1
				},
				topFuncList: {
					currentIndex: -1,
					data: [{
							name: '价格',
							status: 0
						},
						{
							name: '折扣',
							status: 0
						},
						{
							name: '品牌',
							status: 0
						}
					]
				}
			}
		},
		onLoad(options) {
			this.searchParams.keyword = options.keyword
			this.listData(this.searchParams.keyword)
		},
		onReachBottom() {
			if(this.searchParams) {
				this.searchParams.pageNo++
			} else {
				this.searchParams.pageNo = 0
			}
			this.listData()
		},
		methods: {
			handleAttrSelect(e) {
				let attrValues = e.detail.value
				this.selectAttrsTmp = {
					attrId: this.selectedTapBar.attrId,
					selectValues: attrValues
				}
				if(attrValues.length === 0) {
					let idx = this.selectedAttrs.findIndex(item => item.attrId === this.selectAttrsTmp.attrId)
					if(idx != -1) {
						this.selectedAttrs.splice(idx,1)
					}
					this.selectAttrsTmp = {}
					return
				}
			},
			reset() {
				this.selectedAttrs = []
			},
			confirmSelectAttr() {
				this.showAttrBox = false
				if(!this.selectAttrsTmp.attrId) {
					this.listData()
					return
				}
				let idx = this.selectedAttrs.findIndex(item => item.attrId === this.selectAttrsTmp.attrId)
				if(idx != -1) {
					this.selectedAttrs.splice(idx,1)
				}
				this.selectedAttrs.push(this.selectAttrsTmp)
				this.selectAttrsTmp = {}
				this.listData()
			},
			back() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			openAttrBox(attr) {
				this.showAttrBox = true
				this.attrList = attr.attrValue
				this.selectedTapBar = attr
			},
			goDetail() {
				uni.navigateTo({
					url: '../../pages/product-detail/product-detail'
				})
			},
			
			listData() {
				delete this.searchParams.attrs
				if(this.selectedAttrs && this.selectedAttrs.length > 0) {
					let attrs = this.selectedAttrs.map(item => {
						return {
							attrId: item.attrId,
							attrValues: item.selectValues
						}
					})
					this.searchParams.attrs = [...attrs]
				}
				$http.request({
					url: '/search/search',
					method: 'post',
					data: this.searchParams,
					loading: true
				}).then(res => {
					if(res.success) {
						this.commodityList.push(...res.data.skuList)
						if(this.topBar.length === 0) {
							this.topBar = res.data.attrs.filter(item => item.attrValue && item.attrValue.length >= 1)
						}
					} else {
						uni.showToast({
							duration: 3000,
							title: '演示环境暂未部署 ElasticSearch ，搜索失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.attr-box {
		width: 100%;
	}

	.attr-content {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.attr-item {
		padding: 10rpx 0;
		width: 50%;
		font-size: 22rpx;
	}
	.attr-box-footer {
		width: 100%;
		bottom: 0;
	}

	.attr-footer-item {
		display: inline-block;
		width: 50%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.reset {
		border-top: 3rpx solid #F7F7F7;
		color: #E4393D;
	}

	.confirm {
		background-color: #E4393D;
		color: #FFFFFF;
	}

	.shop-title {
		color: #7F7F7F;
		display: flex;
	}

	.shop-item {
		/* 每个子元素占1份 */
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
	}

	.icon-arrow {
		position: relative;
		margin-left: 10rpx;
	}

	.search-sort {
		width: 32rpx;
		height: 16rpx;
		position: absolute;
		left: 0;
	}

	.up {
		top: -21rpx;
	}

	.down {
		top: -6rpx;
	}

	.scroll-content {
		width: 100%;
		height: auto;
		margin-top: 10rpx;
		white-space: nowrap;
	}

	.scroll-item {
		display: inline-block;
		background-color: #F0F2F5;
		color: #666666;
		font-size: 22rpx;
		width: 130rpx;
		text-align: center;
		padding: 10rpx 15rpx;
		margin: 0 10rpx;
	}
	
	.scroll-item-active {
		color: #E4393D;
	}

	.jiantou {
		display: inline-block;
		color: #CCCCCC;
	}
	.commodity {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 20rpx;
	}
	
	.commodity-item {
		padding-bottom: 20rpx;
		width: 48%;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}
	
	.quick-attrs {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	
	.quick-attr-item {
		padding: 3rpx 8rpx;
		font-size: 16rpx;
		background-color: #F2F2F7;
		color: #A4A4A4;
		white-space: nowrap;
		overflow: hidden;
		max-width: 80rpx;
		text-align: center;
		margin: 0 5rpx;
		text-overflow: ellipsis;
	}
	
	.price-box {
		display: inline-block;
		margin-top: 10rpx;
		font-weight: 600;
		font-size: 20rpx;
	}
	
	.price-prefix {
		font-size: 20rpx;
	}
	
	.price-suffix {
		font-size: 22rpx;
		color: #FF4142;
	}
	
	.commodity-cover {
		width: 100%;
		height: 370rpx;
	}
	
	.commodity-title {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}
	
	.commodity-content {
		padding: 16rpx 20rpx;
	}
	
	.current-price {
		font-size: 32rpx;
		color: #FF4142;
	}
	
	.discount {
		border-radius: 4rpx;
		border: 1px solid #FF3333;
		padding: 2rpx 10rpx;
		font-size: 20rpx;
		color: #FF3333;
		margin-left: 10rpx;
	}
</style>